<template>
  <span>span占位</span>
  <div class="grid-1">
    <div class="grid-item grid-item-1">1</div>
    <div class="grid-item grid-item-2">2</div>
    <div class="grid-item grid-item-3">3</div>
  </div>
  <span>基于线组合写法grid-column: 2 / 4 (开始/结束)</span>
  <div class="grid-2">
    <div class="grid-item grid-item-1">1</div>
    <div class="grid-item grid-item-2">2</div>
    <div class="grid-item grid-item-3">3</div>
  </div>

  <span>基于线组合写法 grid-area: 2 / 3 / 3 / 4 (row/columns开始/row/columns结束)</span>
  <div class="grid-3">
    <div class="grid-item grid-item-1">1</div>
    <div class="grid-item grid-item-2">2</div>
    <div class="grid-item grid-item-3">3</div>
  </div>
</template>
<style lang="scss" scoped>
.grid-1 {
  width: 150px;
  height: 150px;
  background: #00f;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  .grid-item-1 {
    grid-column-start: 2;
    grid-column-end: span 2;
  }
}

.grid-2 {
  width: 150px;
  height: 150px;
  background: #00f;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  .grid-item-1 {
    grid-column: 2 / 4;
  }
}

.grid-3 {
  width: 150px;
  height: 150px;
  background: #00f;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  .grid-item-1 {
    // grid-row: 2 / 3;
    // grid-column: 3 / 4;
    grid-area: 2 / 3 / 3 / 4;
  }
}
</style>
